<template>
	<div class="product-classify">
		<div class="classify-nav" ref="classify">
			<div class="classify-item" :class="{'active':idx == active}" v-for="(item,idx) in classifyNavData" :key="item.id">
				<mt-button type="default" @click.native="handleChangeClassifyNav(idx,item,$event)">
					<!--<img :src="item.iconUrl" />-->
					{{item.className.split('、')[0]}}
				</mt-button>
			</div>
		</div>
		<div class="classify-content" ref="content">
			<div>
				<div class="classify-content-item" v-for="item in classifyNavData" :key="item.id">
					<div class="classify-item-title">
						<p>{{item.className}}</p>
					</div>
					<router-link v-for="itemInfo in item.childs" :key="itemInfo.id" :to="{path: '/product_list?id=' + itemInfo.id + '&name='+ itemInfo.className}">
						<div class="classify-item-info">
							<img :src="itemInfo.iconUrl" />
							<p>{{itemInfo.className}}</p>
						</div>
					</router-link>
				</div>
			</div>
		</div>
		<!--tabbar-->
		<tabbar></tabbar>
	</div>
</template>

<script>
	import tabbar from '../Sub/Tabbar';
	import BScroll from 'better-scroll';
	export default {
		name: 'product-classify',
		data() {
			return {
				classifyNavData: sessionStorage.getItem('classifyNavData') ? JSON.parse(sessionStorage.getItem('classifyNavData')) : [],
				active: 0,
				classifyNavDataInfo: {},
				listHight: [],
				scrollY: 0
			}
		},
		methods: {
			calculateHeight() {
				let contentList = this.$refs.content.getElementsByClassName('classify-content-item');
				let height = 0
				this.listHight.push(height)
				for(let i = 0; i < contentList.length; i++) {
					let item = contentList[i]
					height += item.clientHeight
					this.listHight.push(height)
				}
			},
			handleChangeClassifyNav(idx, row, event) {
				if(!event._constructed) {
					return;
				}
				this.active = idx;
				let contentList = this.$refs.content.getElementsByClassName('classify-content-item');
				let el = contentList[idx];
				this.scrollContent.scrollToElement(el, 300);
			},
			initScroll() {
				this.$nextTick(() => {
					this.scrollContent = new BScroll(this.$refs.content, {
						click: true,
						probeType: 3
					})
					this.scrollClassify = new BScroll(this.$refs.classify, {
						click: true
					});
					this.scrollContent.on('scroll', pos => {
						this.scrollY = Math.abs(Math.round(pos.y));
						this.active = this.currentIndex();
					});
				})
			},
			currentIndex() {
				for(let i = 0; i < this.listHight.length; i++) {
					let height1 = this.listHight[i];
					let height2 = this.listHight[i + 1];
					if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
						//						if(this.scrollY - height1 > (height2 - height1) / 2 * 1.5) {
						//							return i + 1;
						//						} else {
						return i;
						//						}
					}
				}
				return 0
			},
			getData() {
				this.$http.get('/mobileindex/nav.htm', {

				}).then(res => {
					if(res.code == 0) {
						this.classifyNavData = res.data;
						sessionStorage.setItem('classifyNavData', JSON.stringify(this.classifyNavData));
						this.$nextTick(() => {
							this.calculateHeight();
							this.initScroll();
						});
					}
				})
			}
		},
		components: {
			tabbar
		},
		created() {
			this.api.setHeader('商品分类');
			sessionStorage.setItem('tabbarItem', 'product_classify');
		},
		mounted() {
			this.$nextTick(() => {
				this.getData()
			});
		}
	}
</script>

<style lang="less">
	.product-classify {
		width: 100%;
		height: 100%;
		position: relative;
		.classify-nav {
			position: fixed;
			top: 0;
			left: 0;
			bottom: 1rem;
			z-index: 1;
			width: 1.5rem;
			overflow: auto;
			border-right: 1px solid #CDCDCD;
			.classify-item {
				width: 100%;
				display: table;
				border-bottom: 1px solid #CDCDCD;
				.mint-button--normal {
					display: block;
					width: 100%;
					border-radius: 0;
					font-size: 0.28rem;
					border: none;
					padding: 0;
					background-color: buttonface;
				}
				&.active {
					.mint-button--normal {
						background-color: #f9f9f9 !important;
					}
				}
			}
		}
		.classify-content {
			position: absolute;
			top: 0;
			left: 1.5rem;
			right: 0;
			bottom: 1rem;
			z-index: 1;
			overflow: auto;
			.classify-content-item {
				display: table;
				width: 100%;
			}
			.classify-item-title {
				p {
					font-size: 0.3rem;
					margin: 0;
					padding: 0.12rem;
					color: #3F3F3F;
				}
			}
			.classify-item-info {
				width: 33.33%;
				display: inline-block;
				box-sizing: border-box;
				padding: 0.12rem;
				img {
					max-width: 100%;
				}
				p {
					font-size: 0.26rem;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>